<script setup lang="tsx">
import { ref, unref, h, reactive } from 'vue'
import { Table } from '@/components/Table'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useTable } from '@/hooks/web/useTable'
import { Search } from '@/components/Search'
import PipnentInfoApi from '@/api/equip/pipnet'
import { useI18n } from '@/hooks/web/useI18n'
import { useDeptStore } from '@/store/modules/dept'
import { useDictStore } from '@/store/modules/dictData'
import { useGISStore } from '@/store/modules/gis'
import { ElTag } from 'element-plus'
import DeptApi from '@/api/dept'
const { t } = useI18n()
const DeptStore = useDeptStore()
const DictStore = useDictStore()
DictStore.setDict('pipe_material') //材质字典
DictStore.setDict('pipe_state') //状态字典
const GISStore = useGISStore()
const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    type: 'selection',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    fixed: 'left'
  },
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index',
    fixed: 'left',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'dataSource',
    label: t('数据来源'),
    width: 100,
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'pipeLineName',
    label: t('管线名称'),
    width: 100,
    form: {
      colProps: {
        span: 13
      }
    },
    search: {
      hidden: false,
      component: 'Input',
      componentProps: {
        placeholder: '管线名称'
      }
    }
  },
  {
    field: 'pipeState',
    label: t('使用状态'),
    width: 100,
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return DictStore.$state.pipe_state?.map((item) => {
        if (item.dictValue == cellValue) {
          return h(ElTag, { type: item.listClass }, () => item.dictLabel)
        }
      })
    },
    search: {
      hidden: false,
      component: 'Select',
      componentProps: {
        placeholder: '使用状态',
        options: DictStore.$state.pipe_state?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    form: {
      component: 'Select',
      colProps: {
        span: 12
      },
      componentProps: {
        options: DictStore.$state.pipe_state?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    }
  },
  {
    field: 'pipeLineType',
    label: t('管线类型'),
    width: 150,
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return DictStore.$state.pipe_line_type?.map((item) => {
        if (item.dictValue == cellValue) {
          return item.dictLabel
        }
      })
    },
    search: {
      hidden: false,
      component: 'Select',
      componentProps: {
        placeholder: '管线类型',
        options: DictStore.$state.pipe_line_type?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    form: {
      component: 'Select',
      colProps: {
        span: 12
      },
      componentProps: {
        options: DictStore.$state.pipe_line_type?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    }
  },
  {
    field: 'pressure',
    label: t('压力值'),
    width: 150,
    search: {
      hidden: true
    }
  },
  {
    field: 'pipeLineNo',
    label: t('管线编码'),
    width: 150,
    search: {
      hidden: true
    }
  },
  {
    field: 'buriedWay',
    label: t('埋设方式'),
    width: 150,
    search: {
      hidden: true
    }
  },
  {
    field: 'material',
    label: t('材质'),
    width: 150,
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return DictStore.$state.pipe_material?.map((item) => {
        if (item.dictValue == cellValue) {
          return item.dictLabel
        }
      })
    },
    form: {
      component: 'Select',
      colProps: {
        span: 12
      },
      componentProps: {
        options: DictStore.$state.pipe_material?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'deptId',
    label: t('责任部门'),
    width: 150,
    search: {
      hidden: true
    },
    formatter: (_: Recordable, __: any, cellValue: number) => {
      if (cellValue !== undefined && cellValue) {
        return DeptStore.getDeptName(cellValue)[0]?.deptName
      }
    },
    form: {
      component: 'TreeSelect',
      componentProps: {
        renderAfterExpand: false,
        showCheckbox: true,
        checkStrictly: true,
        checkOnClickNode: true,
        nodeKey: 'id',
        props: {
          label: 'label'
        }
      },
      optionApi: async () => {
        const res = await DeptApi.GetDeptListTree()
        return res.data
      }
    }
  },
  {
    field: 'pipeUuid',
    label: t('所属管网'),
    width: 150,
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return GISStore.getPnLedgerList.map((item) => {
        if (item.uuid == cellValue) {
          return item.pnName
        }
      })
    },
    form: {
      component: 'Select',
      colProps: {
        span: 12
      },
      componentProps: {
        options: GISStore.getPnLedgerList.map((item) => {
          return {
            label: item.pnName,
            value: item.uuid
          }
        })
      }
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'pipeDiameter',
    label: t('管径'),
    width: 150,
    search: {
      hidden: true
    }
  }
])
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await PipnentInfoApi.GetPipeLineList({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.rows,
      total: res.total
    }
  },
  fetchDelApi: async () => {
    // var res = await EmergencyApi.DeletEmergencyInfo(unref(ids)[0]);
    return true
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods
const { allSchemas } = useCrudSchemas(crudSchemas)
const searchParams = ref({})
const setSearchParams = (params: any) => {
  currentPage.value = 1
  searchParams.value = params
  getList()
}
</script>
<template>
  <Search :schema="allSchemas.searchSchema" @reset="setSearchParams" @search="setSearchParams" />
  <Table
    v-model:pageSize="pageSize"
    v-model:currentPage="currentPage"
    :columns="allSchemas.tableColumns"
    :data="dataList"
    row-key="uuid"
    :loading="loading"
    :pagination="{
      total: total
    }"
    @register="tableRegister"
  />
</template>
@/api/gis/Pipnet
